// 首页猜你喜欢api

var xhr = new XMLHttpRequest();  //全局xhr对象

var server_url = "https://pcapi-xiaotuxian-front.itheima.net"  // 生产服务器

var infos = document.querySelectorAll('.iot_item_info')  // 获取商品标题对象

var prices = document.querySelectorAll('.iot_item_price')  // 获取商品价格对象

var item_imgs = document.querySelectorAll('.iot_item_img')  //获取图片对象

var node_wrap = document.querySelector('.iot_guess_like') // 获取插入节点的父元素，做容器

// 封装清洗数据的函数，只能提取出result中的数据数组，因为每个响应格式不一样
var draw_data = (res) => {
    res = JSON.parse(res)
    let datas = res.result // 提取出datas数组
    return datas
}

// 封装get的ajax请求并渲染,api为字符串
var get_ajax_render = (api) => {

    xhr.addEventListener("readystatechange", function () {
        if (this.readyState === 4) {
            // console.log(this.responseText)  //显示响应内容原文
            let datas = draw_data(this.responseText) //调用清洗函数，提取出data数组    
            datas = datas.items //进一步提取  
            for (let i = 0; i < datas.length; i++) {
                let entries = Object.entries(datas[i])  //解包
                let names = entries[1]
                let desc = entries[2]  // 详细描述，暂时用不上
                let price = entries[3]
                let imgs = entries[4]
                //  渲染
                infos[i].innerText = names[1]
                prices[i].innerText = "￥"+price[1]
                item_imgs[i].src = imgs[1]
            }
        }
    });
    xhr.open("GET", server_url + api, true);
    // 发送请求
    xhr.send();
}

// 重新写一个面对翻页需求的ajax
var get_ajax_render_for_more_page = (api, cur_page_num , pagesize) => {

    // 由于对象数量不会变化，因此需要重新获取
    let infos_2 = document.querySelectorAll('.iot_item_info')  // 获取商品标题对象

    let prices_2 = document.querySelectorAll('.iot_item_price')  // 获取商品价格对象

    let item_imgs_2 = document.querySelectorAll('.iot_item_img')  //获取图片对象

    xhr.addEventListener("readystatechange", function () {
        if (this.readyState === 4) {
            // console.log(this.responseText)  //显示响应内容原文
            let datas = draw_data(this.responseText) //调用清洗函数，提取出data数组    
            datas = datas.items //进一步提取  
            for (let i = 0; i < datas.length; i++) {
                let entries = Object.entries(datas[i])  //解包
                let names = entries[1]
                let desc = entries[2]  // 详细描述，暂时用不上
                let price = entries[3]
                let imgs = entries[4]
                //  渲染新生成的壳子
                infos_2[i+cur_page_num*pagesize].innerText = names[1]
                prices_2[i+cur_page_num*pagesize].innerText = "￥"+price[1]
                item_imgs_2[i+cur_page_num*pagesize].src = imgs[1]
            }
        }
    });
    xhr.open("GET", server_url + api, true);
    // 发送请求
    xhr.send();
}

// 封装翻页函数
var change_page = (current_page, pageSize) => {
    let page_query = "?" + "page=" + String(current_page) + "&pageSize=" + String(pageSize)  // 拼接请求参数
    return page_query
}

// 封装插入节点函数
var insert_nodes = () => {
    let new_node = document.createElement('div')
    new_node.className = "iot_guess_like_item"
    new_node.innerHTML = `
    <div class="iot_item_img_info">
    <img src="" class="iot_item_img">
    <p class="iot_item_info">冻干豚骨藤椒面74g</p>
    </div>
    <div class="iot_item_price">￥79.00</div>
    `

    node_wrap.appendChild(new_node)

}


const guesslike_api = "/home/goods/guessLike"  //猜你喜欢

let current_page = 1 // 从第一页开始
let pageSize = 10 // 每次十个数据
var init_scroll = 900 //第一次开始请求数据的滚动高度

// 页面初始化渲染
get_ajax_render(guesslike_api + change_page(current_page, pageSize))

// 实现往下滚动时动态请求数据
window.addEventListener('scroll', () => {
    let scrollTop = window.scrollY || document.documentElement.scrollTop;
    // console.log("实时滚动高度" + scrollTop)
    // console.log("实时容器高度为" + node_wrap.style.height)
    if (scrollTop > init_scroll) {
        // 滚动到一定高度后先增加容器高度以容纳元素
        node_wrap.style.height = 960 * (current_page + 1) + 'px'
        // console.log(node_wrap.style.height)
        // 插入节点(壳子)
        for (let i = 0; i < pageSize; i++) {
            insert_nodes()
        }
        // 请求数据并渲染
        get_ajax_render_for_more_page(guesslike_api + change_page(current_page+1, pageSize),current_page,pageSize)
        // 增加检测高度避免重复载入
        init_scroll += 800
        // console.log("实时检测高度：" + init_scroll)
        current_page++ // 翻页
    }
})